import React from 'react';
import { Collapse } from 'antd';
import css from './index.less';
import Icon from 'components/icon';
import PropTypes from 'prop-types';
const { Panel } = Collapse;

class Group extends React.Component {

  static propTypes = {
    list: PropTypes.arrayOf(PropTypes.shape({
      title: PropTypes.string.isRequired,
      children: PropTypes.element.isRequired
    })),
    defaultActiveKey: PropTypes.arrayOf(PropTypes.number),
  };

  static defaultProps = {
    list: [{
      title: '演示标题',
      children: <div>演示文字</div>
    }],
    defaultActiveKey: [1],
  };

  render() {
    const { list, defaultActiveKey } = this.props;
    const collapseProps = {
      bordered: false,
      defaultActiveKey: defaultActiveKey.map( key => String(key)),
    };
    return (
      <Collapse {...collapseProps}>
        {
          list.map((group, key) => {
            const _props = {
              key,
              className: css.panel,
              header: <div className={css.title}>{group.title} <Icon type="icon-triangle" className={css.icon}/></div>,
              children: group.children,
            };
            return <Panel {..._props}/>;
          })
        }
      </Collapse>
    );
  }
}
export default Group;
